<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1" user-scalable="no">
    <title>动态风流场</title>
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=nuWah68S1WieW2AEwiT8T3Ro&s=1"></script>
    <script type="text/javascript" src="mapstyle/gray.js"></script>
    <script type="text/javascript" src="data/wind-data.js"></script>
</head>

<body>
    <div id="map"></div>
    <script type="text/javascript" src="js/baidu-map-wind.js"></script>
    <script type="text/javascript" src="js/dat.gui.js"></script>
    <script type="text/javascript">
        var map = new BMap.Map('map', {
            minZoom: 5
        });
        map.centerAndZoom(new BMap.Point(113.275995, 23.117055), 11);
        map.enableScrollWheelZoom(true);
        map.setMapStyle({
            styleJson: styleJson
        });

        /************定义canvas图层************/
        function WindOverLayer() { }

        var rectPoints = [109.600899, 25.593504, 117.401353, 20.175226]; //左上、右下经纬度

        WindOverLayer.prototype = new BMap.Overlay();

        WindOverLayer.prototype.initialize = function () {
            var canvas = document.createElement('canvas');
            canvas.id = "windCanvas";
            canvas.width = map.getSize().width;
            canvas.height = map.getSize().height;
            canvas.style.position = 'absolute';
            canvas.style.top = 0;
            canvas.style.left = 0;
            map.getPanes().labelPane.appendChild(canvas);

            this._canvas = canvas;
            this._windy = new Windy({
                map: map,
                canvas: canvas,
                data: windData
            });
        };

        WindOverLayer.prototype.draw = function () {
            var canvas = this._canvas;
            var windy = this._windy;
            var bounds = map.getBounds(); //返回当前视口的西南纬度/经度和东北纬度/经度
            var sw = bounds.getSouthWest();
            var ne = bounds.getNorthEast();
            var py = map.pointToOverlayPixel(new BMap.Point(sw.lng, ne.lat)); //经纬度转成屏幕坐标
            canvas.style.left = py.x + 'px';
            canvas.style.top = py.y + 'px';

            var points = this.invertLatLon(py); //所有站点经纬度转为canvas坐标
            // var min = map.pointToOverlayPixel(new BMap.Point(rectPoints[0], rectPoints[1]));
            // var max = map.pointToOverlayPixel(new BMap.Point(rectPoints[2], rectPoints[3]));
            var min = map.pointToOverlayPixel(new BMap.Point(sw.lng, ne.lat));
            var max = map.pointToOverlayPixel(new BMap.Point(ne.lng, sw.lat));

            windy.start([
                [min.x - py.x, min.y - py.y],
                [max.x - py.x, max.y - py.y]
            ], points);
        }

        WindOverLayer.prototype.invertLatLon = function (py) {
            var points = [];
            windData.forEach(function (station) {
                var px = map.pointToOverlayPixel(new BMap.Point(station[1], station[0]));
                points.push({
                    x: px.x - py.x,
                    y: px.y - py.y,
                    angle: station[2],
                    speed: station[3]
                });
            });
            return points;
        }

        var windLayer = new WindOverLayer()
        map.addOverlay(windLayer);

        var options = {
            size: .8,
            color: 'rgba(71,160,233,0.8)',
        };

        function finished() {
            windLayer._windy.change(options);
        };

        var gui = new dat.GUI({
            nameMap: {
                size: '线条大小',
                color: '线条颜色'
            }
        });
        
        finished();
        gui.add(options, 'size', 0.1, 10).onFinishChange(finished);
        gui.addColor(options, 'color').onChange(finished);
    </script>
</body>

</html>